@function rem($px) {
  @return ($px/75)+rem;
}

$baseColor: #7ecef4;
@mixin text-overflow{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

html, body {
  background: url("../image/public/bg.png");
  height: 100%;
}


.auto-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.wrap-outer {
  min-height: 100%;
  height: auto;
}

.wrap-main {
  padding: rem(30) rem(20) rem(144) rem(20);
}

.footer {
  box-sizing: border-box;
  height: rem(144);
  margin-top: rem(-144);
  background: #3f3939;
  line-height: rem(32);
  padding-top: rem(26);
  P {
    text-align: center;
    font-size: rem(22);
    color: #ffffff;
    margin: 0;
  }
}
//主页面顶部标题样式
.mui-bar {
  height: rem(88);
  padding-left: rem(10);
  padding-right: rem(10);
  font-size: rem(30);
  background: $baseColor;
  .iconfont {
    font-size: .6rem;
    color: #ffffff;
    line-height: rem(88);
    margin-left: .2rem;
  }
  .mui-title {
    line-height: rem(88);
    font-size: rem(32);
    color: #ffffff;
  }
}
//主页面样式
.mui-bar-nav ~ .mui-content {
  padding-top: rem(88);
}
//菜单栏样式
.mui-off-canvas-left, .mui-off-canvas-right{
  background: #ffffff;
  .mui-scroll-wrapper{
    .mui-scroll{
      padding-top: rem(60);
      padding-left: rem(40);
    }
  }
  .info{
    .avatar{
      display: inline-block;
      width: rem(188);
      height: rem(188);
      border-radius: 50%;
      border: 4px solid $baseColor;
      overflow: hidden;
      margin-right: rem(20);
    }
    .per-info{
      display: inline-block;
      height: rem(188);
      vertical-align: top;
      padding-top: rem(50);
      margin-bottom: rem(50);
      .per-name{
        font-size: rem(32);
        color: $baseColor;
        margin-bottom: rem(50);
        line-height: 1;
        @include text-overflow;
        width: rem(270);
      }
      .per-type{
        font-size: rem(22);
        color: #7b7b7b;
      }
    }
    .menu{
      padding-left: rem(46);
      line-height: rem(116);
      .iconfont{
        font-size: rem(48);
        color: $baseColor;
        margin-right: rem(64);
        vertical-align: middle;
      }
      a{
        font-size: rem(30);
        color: #626574;
        vertical-align: middle;
      }
    }
  }
}
